<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<!--引入CSS样式文件-->
		<link rel="stylesheet" href="../../static/lib/layui-v2.6.3/css/layui.css">
		<title>动态表格操作</title>
	</head>
	<body>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<!--<h2>动态表格操作</h2>-->

		<div class="demoTable">
			<button class="layui-btn" data-type="getCheckData">批量删除</button>
			<button class="layui-btn" data-type="getAdd">添加</button>
			<button class="layui-btn" data-type="isAll">验证是否全选</button>
			<!--搜索操作-->
			<div class="layui-input-inline" data-type="getClickData" style="position: absolute; right: 300px;">
				<input type="text" name="dateText" class="layui-input" id="dateTest" style="border-radius: 10px;"
					   placeholder="请输入......"/>
			</div>
			<button type="button" id="inputValueStr" class="layui-btn" style="position: absolute;right: 300px;" data-type="getClickInput">
				<i class="layui-icon layui-icon-search" data-type="getClickData"></i>
			</button>


		</div>


		<table id="tableDemo" lay-filter="clickBtn"></table>

	</body>
	<!--&lt;!&ndash;引入layui 核心库文件&ndash;&gt;-->
	<!--<script src="../layui/layui.js"></script>-->
	<script src="../../static/lib/layui-v2.6.3/layui.js" charset="UTF-8" ></script>
	<script scr="../../static/js/lay-config.js?v=1.0.4" charset="UTF-8" ></script>

	<script>
		/**use函数用于加载页面要使用的模块*/
		layui.use(['layer', 'form', 'table'], function() {


			var layer = layui.layer,
				form = layui.form,
				table = layui.table,
				$ = layui.$;
			table.render({
				elem: '#tableDemo', //绑定容器
				url: 'book/listBook', //数据接口
				page: true, // 开启分页
				cols: [
						[ //绑定表头信息 //设置表头
					//设定类类型为checkbox，主要用于实现批量删除操作
					{type:'checkbox', title:'序号', fixed:'left'},
					{field:'id', title:'编号', width:60,sort:true},
					{field:'name', title:'书名', width:220},
					// templet: 自定义列模板
					{field:'author', title:'作者', width:100, sort:true},
					{field:'price', title:'价格',width:100,align:'center'},
					{field:'sales', title:'销量',width:100,align:'center'},
					{field:'stocks', title:'库存',width:100,align:'center'},
					{field:'imgPath', title:'封面',align:'center'},
					//unresize:true禁用拖拽列宽, style:设置列样式  align:设置列数据显示方式 
					{field:'createTime', title:'出版日期', align:'center',sort:true},
					// {field:'wealth', title:'财富',style:'background-color: #5FB878; color: #fff;', width:150 },
					// {field:'score', title:'评分'} ,//fixed 设置列的固定定位
					
					{title:'操作', fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
				]
				],
				//id: 'testReload',
				toolbar: false, //开启表格头部工具栏区域
				//width:'1200', //设置表格宽度 
				done: function(){ //数据渲染完成之后的回调（回显）
					layer.msg("动态表格数据渲染完成！！！");
				}
			});
			//表格行事件绑定操作
			// clickBtn是table原始容器属性lay-filter的属性值
			table.on('tool(clickBtn)', function(obj){
				var rowDataline = obj.data.id; //获取当前选中行的某个列数据
				var rowData = obj.data; 
				var layEvent = obj.event; //获取的是lay-event的属性值
				if(layEvent == 'detail'){
					//layer.alert("查看当前行数据详信息！！！"+JSON.stringify(rowData));

					layer.open({
						type: 2,
						title: "信息",
						area: ["60%","70%"],
						content: "/book/showInfo",
						//layuio: 当前层DOM对象（当前操作对象），index: 当前层索引
						success: function(layero,index) {
						var childBody =	layer.getChildFrame('body',index);
							//给弹出层赋值

							childBody.find("#name").val(rowData.name);
							childBody.find("#author").val(rowData.author);
							childBody.find("#price").val(rowData.price);
							childBody.find("#sales").val(rowData.sales);
							childBody.find("#stocks").val(rowData.stocks);
							childBody.find("#imgPath").val(rowData.imgPath);
							childBody.find("#createTime").val(rowData.createTime);


						}

					});
				}
				/**删除流程，
					1、当点击删除按钮时
					2、询问是否删除操作操作，点击是就执行删除操作，删除当前行，点击取消就回滚操作
				*/
				if(layEvent =="del"){


					//index索引
					layer.confirm("是否删除",{icon:2}, function(index){
						 // obj.del();
						 // layer.close(index);

						 // alert(obj.data.id);

						 $.ajax({	//使用ajax异步请求进行删除操作
							 type: "delete",  		//请求方式，默认get请求
							 url: "/book/deleteById",
							 data: JSON.stringify({id: obj.data.id}),
							 dataType: "json",
							 contentType: "application/json;charset=UTF-8",
							 success:function (data) {
								 if (data.code == 0){
								 	layer.msg(data.message,{icon: 6,time:1000}, function () {
										window.parent.location.reload(); //重新加载父页面信息
									} )
								 }
							 },
							 error:function (data) {
							 	if (data.code == 1){
							 		layer.msg(data.message,{icon: 5,time:1000})
								}

							 }

						 })

						// //请求参数
						// var list = {};
						//
						// $.ajax({
						// 	//请求方式
						// 	type : "get",
						// 	//请求的媒体类型
						// 	contentType: "application/json;charset=UTF-8",
						// 	//请求地址
						// 	url : "http://127.0.0.1/admin/list/",
						// 	//数据，json字符串
						// 	data : JSON.stringify(list),
						// 	//请求成功
						// 	success : function(result) {
						// 		console.log(result);
						// 	},
						// 	//请求失败，包含具体的错误信息
						// 	error : function(e){
						// 		console.log(e.status);
						// 		console.log(e.responseText);
						// 	}



					}
					);
				}

				if(layEvent =="edit"){
					layer.msg("编辑操作！！！");

					layer.open({
						type: 2,
						title: "编辑操作",
						area: ["60%","80%"],
						content: "/book/addOrUpdateInfo",
						//layuio: 当前层DOM对象（当前操作对象），index: 当前层索引
						success: function(layero,index) {
							var childBody =	layer.getChildFrame('body',index);
							//给弹出层赋值
							childBody.find("#id").val(rowData.id);
							childBody.find("#name").val(rowData.name);
							childBody.find("#author").val(rowData.author);
							childBody.find("#price").val(rowData.price);
							childBody.find("#sales").val(rowData.sales);
							childBody.find("#stocks").val(rowData.stocks);
							childBody.find("#imgPath").val(rowData.imgPath);
							childBody.find("#createTime").val(rowData.createTime);

						}

					})

					/***需求:完成修改功能【20分钟】*思路:
								*
						1、当点击修改按钮时︰弹出修改页面，并且在页面文本框中显示要修改的内容选修
						2、对文本框中显示的内容进行修改，
						3、点击保存按钮
						4、触发修改后的保存操作，将要修改的数据以json格式传递到对应的方法中
						5、在controller中进行保存操作的业务逻辑的处理
						6、根据回现的信息就行显示
						*/


				}
				
			});	
			var active = {
			    getCheckData: function(){ //获取选中数据
			      var checkStatus = table.checkStatus('tableDemo');
			      var checkData = checkStatus.data;
			      var delIds = [];

			      for(var x = 0; x < checkData.length; x++){
					  delIds.push(checkData[x].id);
			      	// delIds += checkData[x].id+";";
				  }

					$.ajax({	//使用ajax异步请求进行删除操作
						type: "delete",  		//请求方式，默认get请求
						url: "/book/deleteBatch",
						//data: JSON.stringify({ids:delIds}),
						data: JSON.stringify(delIds),
						dataType: "json",
						contentType: "application/json;charset=UTF-8",
						success:function (data) {
							if (data.code == 0){
								layer.msg(data.message,{icon: 6,time:500}, function () {
									 window.parent.location.reload(); //重新加载父页面信息
								} )
							}
						},
						error:function (data) {
							if (data.code == 1){
								layer.msg(data.message,{icon: 5,time:500})
							}

						}

					})

			      layer.alert(JSON.stringify(data));
			    }
			    ,getAdd: function(){ //获取选中数目
			      // var checkStatus = table.checkStatus('idTest')
			      // ,data = checkStatus.data;
			      // layer.msg('选中了：'+ data.length + ' 个');

					layer.open({
						type:2,
						title:"信息",
						area: ["60%","80%"],
						content: "/book/addOrUpdateInfo",

					})


			    },
				getClickInput: function () {
					var inputValue = $("#dateTest").val();
					// $.ajax({
					// 	type: "post",
					// 	data: JSON.stringify({"strValue": inputValue}),
					// 	dataType: "json",
					// 	contentType: "applicaiton/json;charset=UTF-8",
					// 	success: function () {
					//
					// 	}
					// })
					table.reload('tableDemo', {
						page:{
							curr: 1
						},
						where:{
							strName: inputValue
						}
					});

					//alert("执行搜索操作！！"+inputValue);
				}
			    ,isAll: function(){ //验证是否全选
			      var checkStatus = table.checkStatus('idTest');
			      layer.msg(checkStatus.isAll ? '全选': '未全选')
			    }
			  };
			  
			  $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
				//将方法交给当前对象使用
			    active[type] ? active[type].call(this) : '';
			  });	
		
		});
	</script>
</html>
